<template>
  <view>
	  
     <div class="w">
		 <div class="page">
          <div class="flex-col space-y-64">
            <div class="flex-col justify-start items-start image-wrapper" style="display:table">
              <image @click="photo"
                class="image"
                src="../../static/16829343556460535149.png"
              />
              <div class="t1">墨言</div>
              <div class="t2">不积硅步无以至千里</div>
            </div>
            <div class="flex-row justify-end section">
              <div class="t3">2023年共斩获</div>
              <div class="t4">{{wordCount}}</div>
              <div class="t5">个单词</div>
              <image
                class="image_2"
                src="../../static/1.png"
              />
              <image
                class="image_2"
                src="../../static/1.png"
              />
              <image
                class="image_2"
                src="../../static/1.png"
              />
            </div>
          </div>
          <div class="section_2">
            <div class="t6" @click= "seeWrongWord">查看错题</div>
          </div>
          <div class="section_3">
            <div class="t7" @click ="e">选择词汇</div>
          </div>
		  
		   </div>
		  
        </div>
  </view>
</template>

<script>
  import api from '../../utils/jiekou.js'
  const {getOldWord} = api
  export default {
    data() {
      return {
        wordCount:9
      }
    },
    onShow() {
      this.getOldWord_Count();
    },
    methods: {
      getOldWord_Count(){
        getOldWord().then((res)=>{
          console.log(res);
          this.wordCount=res.data;
        })
      },
      seeWrongWord(){
        uni.navigateTo({
          url:'/pages/vierror/vierror'
        })
      },
      e(){
        uni.showModal({
          content:"您选择的词汇为",
          cancelText:'六级词汇',
          confirmText:'四级词汇',
        })
      },
      photo(){
        uni.showModal({
          showCancel:false,
          content:'敬请期待',
          confirmText:'OK!'
        })
      }
	  },
  }
</script>

<style>
	.w{
		  height: 100vh;
	}
.page {
  background-color: #ffaa7f;
  height: 100%;
  width: 100%;
  background: url("../../static/2.png") repeat center fixed;
  background-size: 100% 100%;
}
.space-y-64 > *:not(:first-child) {
  margin-top: 4rem;
}
.image-wrapper {
  padding: 1.88rem 0;
  background-color: #ffffff4d;
  border-radius: 2.5rem;
  box-shadow: 0px 0.13rem 0.25rem #00000040;
  border: solid 0.063rem #000000;
  position: absolute;
  top: -50%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 80%;
  height: 17%;
}
.image {
  margin-left: 2rem;
  width: 6rem;
  height: 6rem;
}
.section {
  padding: 2.75rem 1.13rem 3.25rem;
    background-color: #ffffff4d;
    border-radius: 2.5rem;
    box-shadow: 0px 0.13rem 0.25rem #00000040;
    border: solid 0.063rem #000000;
    position: absolute;
    top: 30%;
    left: 0%;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 78%;
    height: 17%;
}
.image_2 {
  width: 2.5rem;
  height: 2.5rem;
}
.section_2 {
  margin-top: 3.63rem;
  background-color: #ffffff4d;
  border-radius: 1.88rem;
  box-shadow: 0px 0.13rem 0.25rem #00000040;
  height: 4.81rem;
  position: absolute;
  top: 32%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 78%;
  height: 10%;
  
}
.section_3 {
  margin-right: 0.5rem;
  margin-top: 4.88rem;
  background-color: #ffffff4d;
  border-radius: 1.88rem;
  box-shadow: 0px 0.13rem 0.25rem #00000040;
  height: 4.75rem;
  position: absolute;
  top: 61%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 78%;
  height: 10%;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;

}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.t1{
  font-family: "思源宋体";
  font-size: 31px;
position: absolute;
top: 26%;
left: 60%;
  right: 0;
  bottom: 0;
  margin:auto;
}
.t2{
  font-family: "思源宋体";
font-weight: bolder;
font-size: 15px;
position: absolute;
top: 68%;
left: 48%;
right: 0;
bottom: 0;
margin: auto;
}
.t3{
  font-weight: bolder;
  font-size: 18px;
position: absolute;
top: 24%;
    left: 10%;
right: 0;
bottom: 0;
margin: auto;
}
.t4{
  font-weight: bolder;
  font-size: 41px;
position: absolute;
top: 38%;
left: 8%;
color: red;
right: 0;
bottom: 0;
margin: auto;
}
.t5{
  font-weight: bolder;
  font-size: 18px;
position: absolute;
top: 53%;
left: 34%;
right: 0;
bottom: 0;
margin: auto;
}
.t6{
  font-weight: bolder;
  font-size: 29px;
position: absolute;
top: 30%;
left: 30%;
right: 0;
bottom: 0;
margin: auto;
}
.t7{
  font-weight: bolder;
  font-size: 29px;
position: absolute;
top: 30%;
left: 30%;
right: 0;
bottom: 0;
margin: auto;}
</style>
